<template>
  <div ref="chart" class="col"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  components: {},
  props: {
  },
  data() {
    return {
      chart: null,
      theme: 'light',
    };
  },
  watch: {},
  computed: {},
  methods: {
    renderChart() {
      if (!this.chart && this.$refs.chart) {
        this.chart = echarts.init(this.$refs.chart, this.theme);
      }
      const option = this.getOptions();
      this.chart.clear();
      this.chart.setOption(option);
      setTimeout(() => {
        this.chart.resize();
      }, 100);
    },
    getOptions() {
      return {
        title: {
          text: '销售年度总结',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['年初', '年中', '年底'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: ['2015年', '2016年', '2017年', '2018年', '2019年', '2020年', '2021年'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '年初',
            type: 'line',
            step: 'start',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '年中',
            type: 'line',
            step: 'middle',
            data: [220, 282, 201, 234, 290, 430, 410],
          },
          {
            name: '年底',
            type: 'line',
            step: 'end',
            data: [450, 432, 401, 454, 590, 530, 510],
          },
        ],
      };
    },
  },
  created() { },
  mounted() {
    this.renderChart();
  },
};
</script>
<style lang="stylus"></style>
